<template>
	<view class="sxran-im-talk-message-content">
		<mp-html v-if="isRichText" :content='contentText'></mp-html>
		<text v-else>{{ msg.body }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			msg: {
				type: [String, Object],
				default: () => ({})

			},
		},
		data() {
			return {
				contentText: '',
			}
		},
		computed:{
			isRichText:function(){
				const tagPattern = /<[^>]+>/;
				return tagPattern.test(this.contentText);
			}
		},
		mounted() {
			this.contentText = this.highlightLinks(this.msg.body);
		},
		methods: {
			//高亮链接
			highlightLinks(text) {
				// 正则表达式匹配URL链接
				const urlRegex =
					/(https?:\/\/|www\.)[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g

				// 使用replace方法替换匹配的链接
				return text.replace(urlRegex, function(url) {
					// 使用<a>标签并应用样式
					return `<a class='link' href="${url}" target="_blank">${url}</a>`;
				});
			},
		},
		watch: {
			'msg': {
				handler: function(newRes, oldRes) {

				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.sxran-im-talk-message-content {
		background-color: var(--uni-bg-color-bubble);
		border-radius: $uni-border-radius-lg;
		padding: $uni-spacing-col-lg;
		color: var(--uni-text-color);
		font-size: $uni-font-size-base;
		line-height: 1.6;
		.link{
			color: var(--uni-text-color);
		}
	}
</style>